React Native 中切换TextInput保持键盘展开

1、问题

问题场景：

由于手机屏幕高度不定，做表单页面时，外层通常加上ScrollView组件，使其能够适应屏幕进行滚动。业务需要里面放置多个TextInput组件。

问题描述：

出现的问题是，首次点击focus TextInput，键盘弹出，然后想要点击连续focus TextInput时，结果没有focus，而是键盘收起，需要再次点击TextInput 进行focus。

               结果就是每次切换输入框都需要点击两次。

问题影响：

这个问题使得app的体验差到了极点，饱受用户吐槽。

2、解决方案

2.1 整体思路

保持键盘一直展开，然后点击的时候，能够判断点击的组件是否为TextInput，如果是则键盘不收起，否则键盘收起。

2.2 解决步骤

1） 在ScrollView中如何保持键盘一直展开

阅读ScrollView的源码可以发现，它有一个属性keyboardShouldPersistTaps，默认值为false，表示只要点击当前focus组件外的地方，都会引起键盘的收起。

这个是不能连续focus TextInput的原因，引起键盘收起后，还捕获了点击事件，使得focus失效。 所以我们应该把ScrollView的这个属性设置为 true，让键盘一直保持弹出状态。

它还有一个属性keyboardDismissMode，是枚举类型： 代表键盘在drag的时候是否收起

'none' 是默认值，代表键盘一直展开

'on-drag' 代表 ScrollView拖动的时候 键盘收起 在android下无效

'interactive' 翻译过来是互动的时候键盘收起

但是发现在android和ios下也没什么效果

尝试着用这个属性去收起键盘，但是效果不好，并且不兼容android。

最终我们对ScrollView的操作是加上属性 keyboardShouldPersistTaps = true

如何判断点击到的组件是TextInput ？

2）如何获取触摸事件的ID

阅读View的原文我们可以发现属性 onStartShouldSetResponderCapture，这个属性接收一个回调函数，函数原型是 function(evt): bool，在触摸事件开始（touchDown）的时候，RN 容器组件会回调此函数，询问组件是否要劫持事件响应者设置，自己接收事件处理，如果返回 true，表示需要劫持，如果返回false，表示不劫持。

传给回调函数的event里，包含一个触摸事件参数nativeEvent。nativeEvent 的详细内容如下：

• identifier：触摸的 ID，一般对应手指，在多点触控的时候，用来区分是哪个手指的触摸事件；
• locationX 和 locationY：触摸点相对组件的位置；
• pageX 和 pageY：触摸点相对于屏幕的位置；
• timestamp：当前触摸的事件的时间戳，可以用来进行滑动计算；
• target：接收当前触摸事件的组件 ID；
• changedTouches：evt数组，从上次回调上报的触摸事件，到这次上报之间的所有事件数组。因为用户触摸过程中，会产生大量事件，有时候可能没有及时上报，系统用这种方式批量上报；
• touches：evt 数组，多点触摸的时候，包含当前所有触摸点的事件。

这里我们用到的是target属性，它就代表点击的组件ID。

3）如何根据组件ID知道组件是否为TextInput

  React-Native官网的0.28版文档中，View和TextInput组件中都有属性onLayout，这个属性接收一个回调函数，函数原型是 function(evt)，在mount组件和layout的组件的时候触发该事件，传给回调函数的event里，参数nativeEvent，其中的target属性为该组件的ID。

  所以可以在TextInput组件layout时，将他们的ID存放在数组中，然后判断触发事件的组件ID是否在数组中，来确定该组件时候为TextInput。
  
  React-Native官网的0.28版文档中，View和TextInput组件中都有属性onLayout，这个属性接收一个回调函数，函数原型是 function(evt)，在mount组件和layout的组件的时候触发该事件，传给回调函数的event里，参数nativeEvent，其中的target属性为该组件的ID。
  
  所以可以在TextInput组件layout时，将他们的ID存放在数组中，然后判断触发事件的组件ID是否在数组。
  
  0.28版本之前 TextInput组件没有onLayout属性，所以在0.28版本中TextInput没有onLayout属性，hack的方法是用View包裹TextInput，然后给View加onLayout属性，

获取到的是View的组件ID，调试发现，View里面的TextInput的ID是外层View的ID+1，通过这种方法获取的TextInput的组件ID，在0.29以后的版本中，可以直接给TextInput加onLayout属性了。

4）如何控制键盘的收起

 react-native 中有dismissKeyboard模块，用于设置键盘的收起，直接调用该模块方法，即可收起键盘。

2.3 关键代码

const dismissKeyboard = require('dismissKeyboard');
const inputComponents = [];
  
    _onStartShouldSetResponderCapture (event) {
        let target = event.nativeEvent.target;
        if(!inputComponents.includes(target)) {
            dismissKeyboard();
        }
        return false;
    }
 
    _inputOnLayout(event){
        inputComponents.push(event.nativeEvent.target);
    }
  
<ScrollView ref="scrollView" keyboardShouldPersistTaps = {true} >
    <View onStartShouldSetResponderCapture={this._onStartShouldSetResponderCapture.bind(this)}>
          <TextInput onLayout={this._inputOnLayout.bind(this)} style={{flex: 1}}/>
    </View>
</ScrollView>

如果觉得有收获请关注微信公众号 前端良文 每周都会分享前端开发中的干货知识点。